/**
 * @file QualityEvaluation.vue
 * @description 智能质量评估功能页面
 * @created 2024-03-20
 */

<template>
  <div class="quality-evaluation">
    <div class="page-header">
      <h2>智能质量评估</h2>
      <button class="upload-btn">
        <span class="icon">📤</span>
        上传资源评估
      </button>
    </div>

    <!-- 评估总览 -->
    <div class="evaluation-overview">
      <div class="score-card">
        <div class="score">95</div>
        <div class="label">综合评分</div>
        <div class="trend">较上周 <span class="up">↑2.5</span></div>
      </div>
      
      <div class="metrics-grid">
        <div class="metric-card" v-for="metric in evaluationMetrics" :key="metric.name">
          <div class="metric-icon">{{ metric.icon }}</div>
          <div class="metric-info">
            <div class="metric-name">{{ metric.name }}</div>
            <div class="metric-value">{{ metric.value }}/100</div>
          </div>
          <div class="metric-progress">
            <div class="progress-bar" :style="{ width: metric.value + '%' }"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 详细评估报告 -->
    <div class="evaluation-details">
      <h3>详细评估报告</h3>
      <div class="report-sections">
        <div class="report-card" v-for="report in evaluationReports" :key="report.title">
          <h4>{{ report.title }}</h4>
          <div class="report-content">
            <div class="score-section">
              <div class="score">{{ report.score }}</div>
              <div class="rating">{{ report.rating }}</div>
            </div>
            <div class="suggestions">
              <div class="suggestion-item" v-for="(suggestion, index) in report.suggestions" 
                   :key="index">
                <span class="bullet">•</span>
                {{ suggestion }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 评估指标数据
const evaluationMetrics = ref([
  { name: '内容质量', value: 95, icon: '📚' },
  { name: '格式规范', value: 88, icon: '📋' },
  { name: '教学适用性', value: 92, icon: '🎯' },
  { name: '资源完整性', value: 96, icon: '✅' }
])

// 详细评估报告
const evaluationReports = ref([
  {
    title: '内容质量评估',
    score: 95,
    rating: '优秀',
    suggestions: [
      '知识点覆盖全面，逻辑结构清晰',
      '案例丰富，实用性强',
      '建议增加更多互动练习环节'
    ]
  },
  {
    title: '格式规范评估',
    score: 88,
    rating: '良好',
    suggestions: [
      '部分图片分辨率需要提高',
      '建议统一字体样式',
      '可以优化页面布局'
    ]
  },
  {
    title: '教学适用性评估',
    score: 92,
    rating: '优秀',
    suggestions: [
      '符合教学大纲要求',
      '难度梯度合理',
      '建议增加课后延伸资料'
    ]
  }
])
</script>

<style scoped>
.quality-evaluation {
  padding: 24px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.upload-btn {
  padding: 10px 20px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.evaluation-overview {
  margin-bottom: 32px;
}

.score-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.score {
  font-size: 48px;
  font-weight: bold;
  color: #1890ff;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.metric-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.metric-icon {
  font-size: 24px;
  margin-bottom: 12px;
}

.metric-progress {
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  margin-top: 12px;
}

.progress-bar {
  height: 100%;
  background: #1890ff;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.report-sections {
  display: grid;
  gap: 20px;
}

.report-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.report-content {
  display: flex;
  margin-top: 16px;
}

.score-section {
  flex: 0 0 120px;
  text-align: center;
}

.suggestions {
  flex: 1;
  padding-left: 24px;
  border-left: 1px solid #f0f0f0;
}

.suggestion-item {
  margin-bottom: 8px;
  color: #666;
}

.up {
  color: #52c41a;
}
</style> 